<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="font/iconfont.css">
    <link rel="stylesheet" href="css/style.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <title>哇塞的自行车</title>
</head>

<body>

    <div class="container">
        <!--菜单部分-->
        <div class="nav">
            <div class="logo"><img src="img/logo.png" alt=""></div>
            <div class="menu">
                <span class="iconfont icon-caidan-shousuo"></span>
            </div>
        </div>
        <!--文字内容部分-->
        <div class="content">
            <h3>The Hubles</h3>
            <h1>E-BIKE</h1>
            <p>Style, Security and Safety Built for the Modern Urban Cyclist</p>

            <div class="btn">
                <a href="#">Order Now</a>
                <a href="#"><span class="iconfont icon-youjiantou"></span></a>
            </div>
        </div>
        <!--车子参数部分-->
        <div class="data-wrap">
            <div class="data">
                <div class="item">
                    <h4>750W</h4>
                    <p>Motor</p>
                </div>
                <div class="item">
                    <h4>3Hours</h4>
                    <p>Charging Time</p>
                </div>
                <div class="item">
                    <h4>25mph</h4>
                    <p>Per Hour</p>
                </div>
                <div class="item">
                    <h4>48V</h4>
                    <p>Battery</p>
                </div>
            </div>

            <div class="left-circle"><img src="img/circle.svg" alt=""></div>
            <div class="right-circle"><img src="img/circle.svg" alt=""></div>

        </div>

    </div>

    <!--车子图片部分-->
    <div class="bike">
        <div class="bike-wrap">
            <img id="pic" class="pic" src="img/bike1.png" alt="">
        </div>
        <div id="light" class="light visual">
            <p>SignalLight</p>
        </div>
        <div id="handle" class="handle visual">
            <p>Handlebar</p>
        </div>
    </div>

</body>
<script>
    //信息灯的部分
    //当灯的按钮被点击时
    $('#light').click(function() {
        //按钮的位置在两种位置之间相互切换
        //就是切换了两种css样式，所以，我们用toggleClass
        $('#light').toggleClass(function() {
            //如果是默认的light按钮位置
            if ($(this).hasClass('light')) {
                //我们就移除这个默认的light类
                $(this).removeClass('light');
                //切换成light1的css样式，实现按钮的位置变化
                return 'light1';
            } else {
                //如果当前没有light的样式，那就是当前为light1的样式
                //移除light1的样式
                $(this).removeClass('light1');
                //切换成light的css样式，实现按钮的位置变化
                return 'light';
            }
        })
        //如果大家还不明白，那么我们手动执行一下，就肯定明白了。

        //图片大小改变跟按钮一样的道理，同样是在两种css样式中切换
        $('#pic').toggleClass(function() {
            if ($(this).hasClass('pic')) {
                $(this).removeClass('pic');
                return 'pic1';
            } else {
                $(this).removeClass('pic1');
                return 'pic';
            }
        })

        //隐藏其他按钮  接下来我们设置按钮的隐藏和显示
        //点击light按钮的时候，handle按钮就隐藏，同样是在两种css样式中切换
        $('#handle').toggleClass(function() {
            if ($(this).hasClass('visual')) {
                $(this).removeClass('visual');
                return 'hide';
            } else {
                $(this).removeClass('hide');
                return 'visual';
            }
        })
    });
    //车握柄的部分
    $('#handle').click(function() {
        //按钮颜色变化
        $('#handle').toggleClass(function() {
            if ($(this).hasClass('handle')) {
                $(this).removeClass('handle');
                return 'handle1';
            } else {
                $(this).removeClass('handle1');
                return 'handle';
            }
        })

        //图片大小改变
        $('#pic').toggleClass(function() {
            if ($(this).hasClass('pic')) {
                $(this).removeClass('pic');
                return 'pic2';
            } else {
                $(this).removeClass('pic2');
                return 'pic';
            }
        })

        //隐藏其他按钮
        $('#light').toggleClass(function() {
            if ($(this).hasClass('visual')) {
                $(this).removeClass('visual');
                return 'hide';
            } else {
                $(this).removeClass('hide');
                return 'visual';
            }
        })
    });
</script></html>
